<template>
	<view>
		<map id="map" name="map" class="map" :max-scale="maxScale" :markers="markers" :include-points="markers"
			:polyline="polyline" :enable-zoom="false" :enable-scroll="false" @updated="mapUpdated"></map>
		<view class="foot-wrapper">
			<view class="foot-wrapper_title">历史足迹</view>
			<view class="foot-box" v-for="(item, index) in footmark" :key="index">{{ item.city +' - '+ item.address }}
			</view>
			<view class="notice">可截图分享</view>
		</view>
		<!-- <image :src="mapImg" mode="aspectFit" style="width: 750rpx; height: 1500rpx;"></image> -->
	</view>
</template>

<script>
	import {
		getFootmark,
	} from '@/api/user.js'
	export default {
		data() {
			return {
				// 页面传参
				options: {},
				// 足迹
				footmark: [],
				// 最大缩放
				maxScale: 13,
				// 标记
				markers: [],
				// 连线
				polyline: [{
					points: [],
					color: '#BD8142',
					width: 4,
				}],
				mapImg: '',
				mapKey: 'YLJBZ-JL3LK-46WJI-AIJXB-VNJUF-Z6BFS',
			};
		},
		onLoad(options) {
			this.options = options
		},
		onShow() {
			this._getFootmark()
		},
		onReady() {},
		methods: {
			_getFootmark() {
				let that = this
				getFootmark().then(res => {
					that.footmark = res.data
					let tempMarkers = [],
						tempPoints = []
					res.data.forEach((e, index) => {
						tempMarkers.push({
							id: index,
							title: e.title,
							latitude: Number(e.lat),
							longitude: Number(e.lng),
							iconPath: '/static/img/drawing.png',
							width: 40,
							height: 40,
						})
						tempPoints.push({
							latitude: Number(e.lat),
							longitude: Number(e.lng),
						})
					})
					that.markers = tempMarkers
					that.polyline[0].points = tempPoints
				})
			},
			mapUpdated(e) {
				let that = this
			},
			getMapImg() {
				let that = this
				let mapCtx = uni.createMapContext("map");
				mapCtx.getCenterLocation({
					success: (res) => {
						let markers = [],
							path = []
						that.markers.forEach((e, index) => {
							markers.push(
								`markers=size:large|color:red|label:${index+1}|${e.latitude},${e.longitude}`
							)
							path.push(`${e.latitude},${e.longitude}`)
						})
						let markersStr = markers.join('&')
						let pathStr = `color:0xFFBD8142|weight:4|${path.join('|')}`
						that.mapImg =
							`https://apis.map.qq.com/ws/staticmap/v2/?center=${res.latitude},${res.longitude}&zoom=${that.maxScale}&size=375*500&scale=2&key=${that.mapKey}&${markersStr}&path=${pathStr}`
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.map {
		width: 750rpx;
		height: 1000rpx;
	}

	.foot-wrapper {
		padding: 32rpx;

		&_title {
			font-size: 32rpx;
			font-weight: bold;
			padding-bottom: 32rpx;
		}

		.foot-box {
			padding: 32rpx;
			background-color: #fff;
			border-radius: 16rpx;
			font-size: 28rpx;

			&+.foot-box {
				margin-top: 24rpx;
			}
		}
	}

	.notice {
		font-size: 28rpx;
		color: #999;
		text-align: center;
		padding: 32rpx;
	}
</style>
